#{extends 'main.html' /}
#{set title:'CoolSoft - Projects' /}

<script src="/public/javascripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
<script>
  function auto()
  {
	  var selected = document.getElementById("email").checked;
	  var data;
		if(selected == false)
		{
			  var h = document.getElementById("hidUsers").value;
			  var data = h.split(" ");
		}
		else
		{
			  var h = document.getElementById("hidEmails").value;
			  var data = h.split(" ");
		}	  
    $("input#autocomplete").autocomplete({
    source:data
	});
  }
 </script>
<script type="text/javascript">
  function showList(){
	var change = document.getElementById("selectCheckBox").checked;
	var d = document.getElementById("selectionDiv");
	var x = document.getElementById("selectionSubmit");
	var s = document.getElementById("roleSelect");
	if(change==false)
	{
		d.setAttribute("style", "");
		d.removeAttribute("disabled");
		s.removeAttribute("disabled");
	}
	else{
		d.setAttribute("style", "opacity:0.5");	
		d.setAttribute("disabled", "true");
		s.setAttribute("disabled", "true");
		}
	}
	function deselectEmail()
	{
		var un = document.getElementById("autocomplete");
		un.removeAttribute("class");
		un.setAttribute("class", "validate[required,length[2,100]]");
	}

	function deselectUserName()
	{
		var un = document.getElementById("autocomplete");
		un.removeAttribute("class");
		un.setAttribute("class", "validate[required,custom[email]]");		
	}
</script>
#{if flash.success}
  <div id = "content">
     <script>
         javascript: showDialog('Success', '${flash.success}', 'success');
     </script>
 </div>
#{/if}
#{if flash.error}
  <div id = "content">
     <script>
         javascript: showDialog('Error', '${flash.error}', 'error');
     </script>
  </div>
#{/if}

<div>
<h3>
	<form>
		<input id="selectCheckBox" type="checkbox"   onclick ="showList()">
	</form>
		&nbsp;&nbsp; Would you like to select a specific role for the User?
</h3>
</div>
#{form @Users.invitationMessage()}
	<h4 >Select Roles:</h4>
		<div  id="selectionDiv" style="opacity:0.5" disabled="true" name="secondDiv">
			<select id="roleSelect"  name="selection" disabled="true" >
			  #{list items:roles, as:'role'}
				<option name="${role.id}" value="${role.id}">${role.title}</option>
			  #{/list} 
			   </select>
		 </div>
	<br></br>
	<br></br>
	
	<h4>Select User by:</h4>
		<input type="radio" name="userEntry" id="userName" checked  onclick="deselectEmail()" value="userName">User Name</input>
	<br></br>
		<input type="radio" name="userEntry" id="email" onclick="deselectUserName()" value="email">Email</input>
	<br></br>
	<br></br>
		<input type="text" name="userValue" class="validate[required,length[2,100]]" id="autocomplete" onfocus="auto()"></input>
		<input type="hidden" name="users" value="${users}" id="hidUsers"></input>
		<input type="hidden" name="emails" value="${emails}" id="hidEmails"></input>
		<input type="hidden" name="projectId" value="${project.getEntityId()}"></input>
		<input id="selectionSubmit"  type="submit" value="Invite">
#{/form}
	
